<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>公寓首页</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    客服：${customerservice.name}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" class="site-url" data-id="0" data-title="基本资料"
                       data-url="/view/customerservice/customerservice/detail.html?id=${customerservice.id}">基本资料</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="treenav">
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url" data-id="1" data-title="客服管理"
                       data-url="/view/customerservice/customerservice/list.html?"+new Date()>客服管理</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url"data-id="2" data-title="会员管理"
                       data-url="/view/customerservice/customer/list.html?"+new Date()>会员管理</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url"data-id="3" data-title="工程师管理"
                       data-url="/view/customerservice/master/list.html?"+new Date()>工程师管理</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url"data-id="4" data-title="订单管理"
                       data-url="/view/customerservice/orders/list.html?"+new Date()>订单管理</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url" data-id="6" data-title="优惠价管理"
                       data-url="/view/customerservice/coupon/list.html?"+new Date()>优惠价管理</a></li>

<%--                <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-id="1" data-title="按钮" data-url="按钮.html">按钮</a></li>
                <a href="javascript:;">表格</a>
                    <dl class="layui-nav-child">
                        <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="分页" data-id="4" data-url="分页.html">分页</a></li>
                        <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="普通数据表格+分页" data-id="5" data-url="普通数据表格+分页.html">普通数据表格+分页</a></li>
                        <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="开启头部工具栏的表格" data-id="6" data-url="开启头部工具栏的表格.html">开启头部工具栏的表格</a></li>
                        <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="任意格式数据的表格" data-id="7" data-url="任意格式数据的表格.html">任意格式数据的表格</a></li>
                    </dl>
                </li>--%>
            </ul>
        </div>
    </div>

    <div class="layui-body layui-tab" lay-filter="contentnav" lay-allowClose="true" >
        <ul class="layui-tab-title">
            <li lay-id="0" class="layui-this">订单管理<i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li>
        </ul>
        <ul class="layui-bg-green rightmenu" style="display: none;position: absolute;">
            <li data-type="closethis">关闭当前</li>
            <li data-type="closeall">关闭所有</li>
        </ul>
        <div class="layui-tab-content" style="padding:0;">
            <div class="layui-tab-item layui-show"><%--http://www.baidu.com--%>
                <iframe data-frameid="2" scrolling="auto" frameborder="0" src="/view/customerservice/orders/list.html?" style="width: 100%; height: 100%;"></iframe>
            </div>
        </div>
    </div>
</div>

<div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
</div>
<script src="/js/jquery-3.2.1.js"></script>
<script src="/js/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element','layer','jquery'], function() {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.jquery;

        var active = {
            tabAdd: function(url, id, name) {
                element.tabAdd('contentnav', {
                    title: name,
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
                        '" style="width:100%; height: 100%;"></iframe>',
                    id: id
                });
                rightMenu();
                iframeWH();
            },
            tabChange: function(id) {
                element.tabChange('contentnav', id);
            },
            tabDelete: function(id) {
                element.tabDelete('contentnav', id);
            },
            tabDeleteAll: function(ids) {
                $.each(ids, function(index, item) {
                    element.tabDelete('contentnav', item);
                });
            }
        };
        $(".site-url").on('click', function() {
            var nav = $(this);
            var length = $("ul.layui-tab-title li").length;
            if (length <= 0) {
                active.tabAdd(nav.attr("data-url"), nav.attr("data-id"), nav.attr("data-title"));
            } else {
                var isData = false;
                $.each($("ul.layui-tab-title li"), function() {
                    if ($(this).attr("lay-id") == nav.attr("data-id")) {
                        isData = true;
                    }
                });
                if (isData == false) {
                    active.tabAdd(nav.attr("data-url"), nav.attr("data-id"), nav.attr("data-title"));
                }
                active.tabChange(nav.attr("data-id"));
            }
        });

        function rightMenu() {
            //右击弹出
            $(".layui-tab-title li").on('contextmenu', function(e) {
                var menu = $(".rightmenu");
                menu.find("li").attr('data-id', $(this).attr("lay-id"));
                l = e.clientX;
                t = e.clientY;
                menu.css({
                    left: l,
                    top: t
                }).show();
                return false;
            });
            //左键点击隐藏
            $("body,.layui-tab-title li").click(function() {
                $(".rightmenu").hide();
            });
        }
        $(".rightmenu li").click(function() {
            if ($(this).attr("data-type") == "closethis") {
                active.tabDelete($(this).attr("data-id"));
            } else if ($(this).attr("data-type") == "closeall") {
                var tabtitle = $(".layui-tab-title li");
                var ids = new Array();
                tabtitle.each(function(i) {
                    ids.push($(this).attr("lay-id"));
                });
                //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
                active.tabDeleteAll(ids);
            }
            $('.rightmenu').hide(); //最后再隐藏右键菜单
        });

        function iframeWH() {
            var H = $(window).height() - 120;
            $("iframe").css("height", H + "px");
        }
        $(window).resize(function() {
            iframeWH();
        });
    });
</script>
</body>
</html>
